// 排行榜页面JavaScript

document.addEventListener('DOMContentLoaded', function() {
    // 获取排行榜数据
    fetchLeaderboard();
});

// 获取排行榜数据
function fetchLeaderboard() {
    // 在实际应用中，这里应该从后端获取数据
    // 模拟数据
    const leaderboard = [
        {
            rank: 1,
            user: '小明',
            accuracy: 95.5,
            total: 120,
            correct: 115
        },
        {
            rank: 2,
            user: '小红',
            accuracy: 92.3,
            total: 105,
            correct: 97
        },
        {
            rank: 3,
            user: '小华',
            accuracy: 89.7,
            total: 98,
            correct: 88
        },
        {
            rank: 4,
            user: '小李',
            accuracy: 85.2,
            total: 85,
            correct: 72
        },
        {
            rank: 5,
            user: '小王',
            accuracy: 82.6,
            total: 78,
            correct: 64
        }
    ];
    
    displayLeaderboard(leaderboard);
}

// 显示排行榜
function displayLeaderboard(leaderboard) {
    // 显示前三名
    displayPodium(leaderboard.slice(0, 3));
    
    // 显示完整排行榜
    displayLeaderboardTable(leaderboard);
}

// 显示前三名
function displayPodium(topThree) {
    const podium = document.querySelector('.podium');
    podium.innerHTML = '';
    
    // 第二名
    if (topThree[1]) {
        const second = document.createElement('div');
        second.className = 'podium-item second';
        second.innerHTML = `
            <div class="podium-rank">2</div>
            <div class="podium-user">${topThree[1].user}</div>
            <div class="podium-score">${topThree[1].accuracy}%</div>
        `;
        podium.appendChild(second);
    }
    
    // 第一名
    if (topThree[0]) {
        const first = document.createElement('div');
        first.className = 'podium-item first';
        first.innerHTML = `
            <div class="podium-rank">1</div>
            <div class="podium-user">${topThree[0].user}</div>
            <div class="podium-score">${topThree[0].accuracy}%</div>
        `;
        podium.appendChild(first);
    }
    
    // 第三名
    if (topThree[2]) {
        const third = document.createElement('div');
        third.className = 'podium-item third';
        third.innerHTML = `
            <div class="podium-rank">3</div>
            <div class="podium-user">${topThree[2].user}</div>
            <div class="podium-score">${topThree[2].accuracy}%</div>
        `;
        podium.appendChild(third);
    }
}

// 显示排行榜表格
function displayLeaderboardTable(leaderboard) {
    const tbody = document.querySelector('#leaderboard-table tbody');
    tbody.innerHTML = '';
    
    leaderboard.forEach(user => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${user.rank}</td>
            <td>${user.user}</td>
            <td>${user.accuracy}%</td>
            <td>${user.total}</td>
            <td>${user.correct}</td>
        `;
        tbody.appendChild(row);
    });
}